<template>
  <div class="container">
    <div class="title-wrapper">
      <div class="title">东莞市中心城区“一心两轴三片区”建设现场指挥部</div>
      <div class="title">专家及设计资源库</div>
    </div>
    <div class="link-wrapper">
      <div class="expert-wrapper" @click="goToLink('/Expert')">
        <div class="img-div"><img src="../assets/img/home-expert.png" alt=""></div>
        <h1 class="link-title">选专家</h1><span class="link-tips">已收录 300 位国内外知名专家</span></div>
      <div class="team-wrapper" @click="goToLink('/Team')">
        <div class="img-div"><img src="../assets/img/home-team.png" alt=""></div>
        <h1 class="link-title">选设计团队</h1><span class="link-tips">已收录 100 家国内外知名设计团队</span>
      </div>
    </div>
    <div class="footer"> Copyright ©{{new Date().getFullYear()}} 东莞市城建规划设计院 版权所有</div>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods:{
    goToLink(path) {
      this.$store.state.toWhere = path
      this.$cookies.isKey("user") ? this.$router.push(path) : this.$store.commit("showLoginWrapper")
    }
  }
}
</script>

<style scoped>
.container .title-wrapper {
  background-color: #2b6695;
  height: 400px;
  padding-top: 40px
}

.container .title {
  padding-top: 20px;
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #fff
}

.link-wrapper {
  display: flex;
  justify-content: center;
  margin-top: -200px
}

.link-wrapper .link-title {
  font-size: 32px;
  color: #7f7f7f;
  padding: 4px 10px
}

.link-wrapper .link-tips {
  font-size: 18px;
  color: #3f7fc7;
  padding: 20px 10px
}

.expert-wrapper,.team-wrapper {
  margin: 40px;
  background-color: #fff;
  padding-bottom: 10px;
  cursor: pointer;
  transition: all .3s ease
}

.expert-wrapper:hover,.team-wrapper:hover {
  box-shadow: 0 1rem 2rem 0 rgba(48,55,66,.15);
  transform: translateY(-10px)
}

.expert-wrapper .img-div,.team-wrapper .img-div {
  height: 300px;
  width: 585px;
  overflow: hidden
}

.expert-wrapper img,.team-wrapper img {
  width: 100%;
  height: 300px
}

.footer {
  margin-top: 200px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px 0 20px;
  background-color: #f4f4f4;
  color: #aaa;
  font-size: 18px
}

</style>